<!-- 配售记录 -->
<template>
	<view class="pr-container">
		<t-header @back="clickNavBackFn">配售记录</t-header>
		<!-- content -->
		<view class="pr-content">
			<!-- tabs -->
			<view class="pr-content-tabs">
				<view
					v-for="(item, index) in tabs"
					:key="index"
					@click="clickTabItemFn(index)"
					class="pr-content-tab"
					:class="{'pr-content-tab-selected': tabIndex === index}"
				>{{ item.name }}</view>
			</view>
			<!-- components -->
			<view class="pr-content-comp">
				<mescroll-uni
					:height="`${height}rpx`"
					:down="downOption"
					:up="upOption"
					@init="mescrollInit"
					@down="downCallback"
					@up="upCallback"
				>
					<tui-list-cell class="margin-top-xs" padding="10rpx 0" v-for="(item,index) in list" :key="index">
						<view class="flex justify-between padding-lr padding-tb-xs">
							<view class="" :style="{fontSize:item.codejson.size+'rpx',color:item.codejson.color}">
								{{item.name}}
							</view>
							<view class="" :style="{fontSize:item.tag.size+'rpx',color:item.tag.color}">
								{{item.status_txt}}
							</view>
						</view>
						<view class="flex justify-between padding-xs border-top con">
							<view class="col-4 text-center">
								<view class="">申购代码</view>
								<view class="text-nomal margin-top-xs">{{item.code}}</view>
							</view>
							<view class="col-4 text-center">
								<view class="">发行价</view>
								<view class="text-nomal margin-top-xs">{{item.sg_fx_price}}</view>
							</view>
							<view class="col-4 text-center">
								<view class="">数量（股）</view>
								<view class="text-nomal margin-top-xs">{{item.sg_nums||0}}</view>
							</view>
						</view>
						<view class="flex justify-between padding-xs border-bottom con">
							<view class="col-4 text-center">
								<view class="">上市时间</view>
								<view class="text-nomal margin-top-xs">
									{{item.sg_ss_date!='0000-00-00'?item.sg_ss_date:'未公布'}}
								</view>
							</view>
							<view class="col-4 text-center">
								<view class="">占用金额</view>
								<view class="text-nomal margin-top-xs">{{item.dj_money||0}}</view>
							</view>
						</view>
						<view class="flex justify-between align-center padding-sm">
							<view class="text-gray text-sm">
								{{item.createtime_txt}}
							</view>
						</view>
					</tui-list-cell>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref, nextTick, inject} from 'vue';
import {onShow, onLoad, onPageScroll, onReachBottom} from '@dcloudio/uni-app';
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";

const {mescrollInit, downCallback, getMescroll} = useMescroll(onPageScroll, onReachBottom);

const tui = inject('tui');

import THeader from '@/components/views/t-header/index.vue'; // 头部组件

// api
import {offlineHistory} from '@/api/index.js';

const height = ref(0);

onLoad((options) => {
	height.value = 1294;
	
	setTimeout(() => {
		getMescroll().resetUpScroll();
	}, 300);
});

// tab index
const tabIndex = ref(0);
// tabs
const tabs = [{name: '申购中'}, {name: '中签'}, {name: '未中签'}];

// 点击返回
const clickNavBackFn = () => {
	const pages = getCurrentPages();
	if (pages.length >= 2) {
		uni.navigateBack();
	} else {
		uni.switchTab({
			url: '/pages/my/index'
		});
	}
};

// tab item click事件
const clickTabItemFn = (index) => {
	tabIndex.value = index;
	
	setTimeout(() => {
		getMescroll().resetUpScroll();
	}, 300);
};

// mescroll-body 配置（down && up）
const downOption = {
	auto: false
};
const upOption = {
	auto: false,
	noMoreSize: 4,
	empty: {
		use : true,
		icon: '/static/images/wushuju.png',
		tip: '~ 空空如也 ~'
	}
};

// 列表数据
const list = ref([]);

const upCallback = (mescroll) => {
	//联网加载数据
	offlineHistory({
		page: mescroll.num,
		size: mescroll.size,
		status: tabIndex.value
	}).then(res => {
		// this.pageInit = true
		if (mescroll.num == 1) list.value = []
		list.value = list.value.concat(res.data.dxlog_list)
		mescroll.endSuccess(res.data.dxlog_list.length);
	});
};
</script>

<style lang='scss' scoped>
.pr-container {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	background: #F5F5F5;
	box-sizing: border-box;
		
  .pr-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin: 0 18rpx 26rpx;
		border-radius: 34rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		
		.pr-content-tabs {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 124rpx;
			padding: 0 52rpx;
			border-radius: 17px 17px 0 0;
			background: linear-gradient( 180deg, #FFFFFF 0%, #F7E9E9 100%);
			
			.pr-content-tab {
				color: #8F8F8F;
				font-size: 36rpx;
				font-weight: 400;
				font-family: PingFangSC, PingFang SC;
				
				&.pr-content-tab-selected {
					position: relative;
					color: #000000;
					font-size: 40rpx;
					transition: all 0.2s linear;
					
					&::after {
						content: '';
						position: absolute;
						top: 64rpx;
						left: 50%;
						width: 58rpx;
						height: 8rpx;
						border-radius: 22rpx;
						background: #F74E51;
						transform: translateX(-50%);
					}
				}
			}
		}
	
		.pr-content-comp {
			flex: 1;
			
			>swiper {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
